<template>
  <view class="product-con">
    <view class='navbar'
          :style="{height:navH+'rpx',opacity:opacity}">
      <view class='navbarH'
            :style='"height:"+navH+"rpx;"'>
        <view class='navbarCon acea-row row-center-wrapper'>
          <view class="header acea-row row-center-wrapper">
            <view class="item"
                  :class="navActive === index ? 'on' : ''"
                  v-for="(item,index) in navList"
                  :key='index'
                  @tap="tap(index)">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="home acea-row row-around row-middle"
          :style="{top:navH/2+'rpx',opacity:(1-opacity)}">
      <view class="iconfont icon-xiangzuo"
            @tap='returns'
            v-if="returnShow"></view>
      <view class="line"
            v-if="returnShow"></view>
      <navigator url='/pages/index/index'
                 open-type='switchTab'
                 class="iconfont icon-shouye4"></navigator>
    </view>
    <view>
      <scroll-view :scroll-top="scrollTop"
                   scroll-y='true'
                   scroll-with-animation="true"
                   :style='"height:"+height+"px;"'
                   @scroll="scroll">
        <view id="past0">
          <!-- 轮播图 -->
          <productConSwiper :imgUrls="storeInfo.slider_image"
                            :videoline="storeInfo.video_link"></productConSwiper>
          <!-- 轮播图end -->
          <!-- wrapper -->
          <view class='wrapper'>
            <view class='share acea-row row-between row-bottom'>
              <view class='money font-color'>
                ￥
                <text class='num'
                      v-text="storeInfo.pink_price || 0"></text>
                <text class='vip-money' v-if="storeInfo.product_type == 2">+{{storeInfo.vip_price}}积分</text>
                <view class="yuan-money">￥{{storeInfo.ot_price}}</view>
              </view>
              <!-- 分享 -->
              <view class='iconfont icon-fenxiang'
                    @click="listenerActionSheet"></view>
              <!-- 分享end -->
            </view>
            <view class='introduce'
                  v-text="storeInfo.store_name"></view>
            <view class='label acea-row row-between row-bottom'>
              <view>快递：
                <text v-if="storeInfo.postage == '0.00'">包邮</text>
                <text v-else>{{storeInfo.postage}}</text>
              </view>
              <view v-text="'月销量:' + (storeInfo.fsales || 0) + (storeInfo.unit_name || '')"></view>
              <view>{{storeInfo.unit_name}}</view>
            </view>
          </view>
          <!-- wrapperEND -->

           <view class="team_box">
             <view class="pin">拼团详情</view>
               <view class="pink_list">
             <ul class="user_list acea-row row-center-wrapper">
               <li class="acea-row row-column row-middle">
                 <image class="tx" :src="pinkList.avatar">
                 <text class="p_name line1">{{pinkList.nickname}}</text>
               </li>
             </ul>
             <!-- <p>还差<span class="reds">3</span>人，即可拼团成功</p> -->
             <stoptimer :endTime="stoptime" :callback="callback" endText="已经结束了"></stoptimer>
           </view>
           </view>
          <view>
           <view class="pin">拼团玩法</view>
            <image class="pyimg" src="/static/images/play.png" mode="" />
          </view>
        </view>
        <view class='product-intro'
              id="past3">
          <view class='title'>产品介绍</view>
          <view class='conter'>
            <jyf-parser :html="description"
                        ref="article"
                        :tag-style="tagStyle"></jyf-parser>
          </view>
          <rich-text :nodes="description" class="conter"></rich-text>
        </view>
        <view style='height:120rpx;'></view>
      </scroll-view>
    </view>
    <!-- 底部按钮 -->
    <view class='footer acea-row row-between-wrapper'>
      <view class='bnt acea-row row-middle'>
        <form @submit="goBuy"
              report-submit='true'>
          <button class='buy bnts'
                  form-type="submit">参与拼团</button>
        </form>
        
      </view>
    </view>
    <!-- 组件 -->
    <productWindow :attr="attr"
                   :isShow='1'
                   :iSplus='1'
                   @myevent="onMyEvent"
                   @ChangeAttr="ChangeAttr"
                   @ChangeCartNum="ChangeCartNum"
                   @attrVal="attrVal"
                   @iptCartNum="iptCartNum"
                   id='product-window'></productWindow>
    <couponListWindow :coupon='coupon'
                      @ChangCouponsClone="ChangCouponsClone"
                      @ChangCoupons="ChangCoupons"
                      @ChangCouponsUseState="ChangCouponsUseState"></couponListWindow>
    <!-- 分享按钮 -->
    <view class="generate-posters acea-row row-middle"
          :class="posters ? 'on' : ''">
      <!-- #ifndef MP -->
      <button class="item"
              hover-class='none'
              v-if="weixinStatus === true"
              @click="H5ShareBox = true">
        <view class="iconfont icon-weixin3"></view>
        <view class="">发送给朋友</view>
      </button>
      <!-- #endif -->
      <!-- #ifdef MP -->
      <button class="item"
              open-type="share"
              hover-class='none'
              @click="goFriend">
        <view class="iconfont icon-weixin3"></view>
        <view class="">发送给朋友</view>
      </button>
      <!-- #endif -->
      <button class="item"
              hover-class='none'
              @click="goPoster">
        <view class="iconfont icon-haibao"></view>
        <view class="">生成海报</view>
      </button>
    </view>
    <view class="mask"
          v-if="posters"
          @click="listenerActionClose"></view>
    <!-- 海报展示 -->
    <view class='poster-pop'
          v-if="posterImageStatus">
      <image src='../../static/images/poster-close.png'
             class='close'
             @click="posterImageClose"></image>
      <image :src='posterImage'></image>
      <!-- #ifndef H5  -->
      <view class='save-poster'
            @click="savePosterPath">保存到手机</view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="keep">长按图片可以保存到手机</view>
      <!-- #endif -->
    </view>
    <view class='mask'
          v-if="posterImageStatus"></view>
    <canvas class="canvas"
            canvas-id='myCanvas'
            v-if="canvasStatus"></canvas>
    <!-- 发送给朋友图片 -->
    <view class="share-box"
          v-if="H5ShareBox">
      <image src="/static/images/share-info.png"
             @click="H5ShareBox = false"></image>
    </view>
  </view>
</template>

<script>
let app = getApp()
import {
  getProductDetail,
  getProductCode,
  collectAdd,
  collectDel,
  postCartAdd,
  gettimer
} from '@/api/store.js'
import { getUserInfo, userShare } from '@/api/user.js'
import { getCoupons, getCanBuy } from '@/api/api.js'
import { getCartCounts } from '@/api/order.js'
import { toLogin } from '@/libs/login.js'
import { mapGetters } from 'vuex'
import { imageBase64 } from '@/api/public'
import dayjs from "@/plugin/dayjs/dayjs.min.js"
import productConSwiper from '@/components/productConSwiper'
import couponListWindow from '@/components/couponListWindow'
import productWindow from '@/components/productWindow'
import userEvaluation from '@/components/userEvaluation'
import shareRedPackets from '@/components/shareRedPackets'
import { silenceBindingSpread } from '@/utils'
import parser from '@/components/jyf-parser/jyf-parser'
import stoptimer from '@/components/stopTimer/stopTimer'
import { log } from 'util'
export default {
  components: {
    productConSwiper,
    couponListWindow,
    productWindow,
    userEvaluation,
    shareRedPackets,
    stoptimer,
    'jyf-parser': parser,
  },
  data() {
    let that = this
    return {
      //属性是否打开
      coupon: {
        coupon: false,
        list: [],
      },
      attrTxt: '购买类型', //属性页面提示
      attrValue: '', //已选属性
      animated: false, //购物车动画
      id: 0, //商品id
      tid:0, //用户id
      stoptime: 0, // 时间戳
      replyCount: 0, //总评论数量
      reply: [], //评论列表
      storeInfo: {}, //商品详情
      productValue: [], //系统属性
      couponList: [], //优惠券
      cart_num: 1, //购买数量
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      isOpen: false, //是否打开属性组件
      actionSheetHidden: true,
      posterImageStatus: false,
      storeImage: '', //海报产品图
      PromotionCode: '', //二维码图片
      canvasStatus: false, //海报绘图标签
      posterImage: '', //海报路径
      posterbackgd: '/static/images/posterbackgd.png',
      sharePacket: {
        isState: true, //默认不显示
      }, //分销商详细
      uid: 0, //用户uid
      circular: false,
      autoplay: false,
      interval: 3000,
      duration: 500,
      clientHeight: '',
      systemStore: {}, //门店信息
      good_list: [],
      replyChance: 0,
      CartCount: 0,
      isDown: true,
      storeSelfMention: true,
      posters: false,
      weixinStatus: false,
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
      },
      description: '',
      navActive: 0,
      H5ShareBox: false, //公众号分享图片
      activity: [],
      navH: '',
      navList: [],
      pinkList: [],
      opacity: 0,
      scrollY: 0,
      topArr: [],
      toView: '',
      height: 0,
      heightArr: [],
      lock: false,
      scrollTop: 0,
      tagStyle: {
        img: 'width:100%;',
      },
      returnShow: true, //判断顶部返回是否出现
      canBuy: 0,
      time: 0,
      timeDay: 0,
      content: '',
      endText: 0
    }
  },
  computed: mapGetters(['isLogin']),
  onLoad(options) {
    let that = this
    var pages = getCurrentPages()
    that.returnShow = pages.length === 1 ? false : true
    // #ifdef MP
    that.navH = app.globalData.navHeight
    // #endif
    // #ifndef MP
    that.navH = 96
    // #endif
    that.id = options.id
    that.tid = options.tid
    gettimer(that.tid).then(res => {
      that.pinkList = res.data.detail
      console.log(res);
      that.stoptime = res.data.detail.stop_time
    })
    uni.getSystemInfo({
      success: function (res) {
        that.height = res.windowHeight
        //res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
      },
    })
    //扫码携带参数处理
    // #ifdef MP
    if (options.scene) {
      let value = that.$util.getUrlParams(decodeURIComponent(options.scene))
      if (value.id) options.id = value.id
      //记录推广人uid
      if (value.pid) app.globalData.spid = value.pid
    }
    if (!options.id) {
      return that.$util.Tips(
        {
          title: '缺少参数无法查看商品',
        },
        {
          tab: 3,
          url: 1,
        }
      )
    } else {
      that.id = options.id
    }
    //记录推广人uid
    if (options.spid) app.globalData.spid = options.spid
    // #endif
    that.getGoodsDetails()
    that.getCouponList()
    //#ifdef H5
    that.isLogin && silenceBindingSpread()
    //#endif
    getCanBuy().then((res) => {
      console.log(res)
      this.canBuy = res.can_buy
    })
  },
  onReady() {},
  /**
   * 用户点击右上角分享
   */
  // #ifdef MP
  onShareAppMessage: function () {
    let that = this
    that.$set(that, 'actionSheetHidden', !that.actionSheetHidden)
    userShare()
    return {
      title: that.storeInfo.store_name || '',
      imageUrl: that.storeInfo.image || '',
      path: '/pages/goods_details/index?id=' + that.id + '&spid=' + that.uid,
    }
  },
  created() {
    console.log("我是", this.storeInfo);
  },
  // #endif
  methods: {
    callback(e) {
      console.log(e);
    },
     onClick (e) {
        uni.showToast({
          title: `点击${e.content.text}`,
          icon: 'none'
        })
      },
      buttonClick (e) {
        console.log(e)
        this.options[2].info++
      },
    closeChange: function () {
      this.$set(this.sharePacket, 'isState', true)
    },
    goActivity: function (e) {
      console.log(e)
      let item = e
      if (item.type === '1') {
        uni.navigateTo({
          url: `/pages/activity/goods_seckill_details/index?id=${item.id}&time=${item.time}&status=1`,
        })
      } else if (item.type === '2') {
        uni.navigateTo({
          url: `/pages/activity/goods_bargain_details/index?id=${item.id}&bargain=${this.uid}`,
        })
      } else {
        uni.navigateTo({
          url: `/pages/activity/goods_combination_details/index?id=${item.id}`,
        })
      }
    },
    /**
     * 购物车手动填写
     *
     */
    iptCartNum: function (e) {
      this.$set(this.attr.productSelect, 'cart_num', e)
    },
    // 后退
    returns: function () {
      uni.navigateBack()
    },
    tap: function (index) {
      var id = 'past' + index
      var index = index
      var that = this
      this.$set(this, 'toView', id)
      this.$set(this, 'navActive', index)
      this.$set(this, 'lock', true)
      this.$set(
        this,
        'scrollTop',
        index > 0
          ? that.topArr[index] - app.globalData.navHeight / 2
          : that.topArr[index]
      )
    },
    scroll: function (e) {
      var that = this,
        scrollY = e.detail.scrollTop
      var opacity = scrollY / 200
      opacity = opacity > 1 ? 1 : opacity
      that.$set(that, 'opacity', opacity)
      that.$set(that, 'scrollY', scrollY)
      if (that.lock) {
        that.$set(that, 'lock', false)
        return
      }
      for (var i = 0; i < that.topArr.length; i++) {
        if (
          scrollY <
          that.topArr[i] - app.globalData.navHeight / 2 + that.heightArr[i]
        ) {
          that.$set(that, 'navActive', i)
          break
        }
      }
    },
    /*
     *去商品详情页
     */
    goDetail(item) {
      if (item.activity.length == 0) {
        uni.redirectTo({
          url: '/pages/goods_details/index?id=' + item.id,
        })
        return
      }
      // 砍价
      if (item.activity && item.activity.type == 2) {
        uni.redirectTo({
          url: `/pages/activity/goods_bargain_details/index?id=${item.activity.id}&bargain=${this.uid}`,
        })
        return
      }
      // 拼团
      if (item.activity && item.activity.type == 3) {
        uni.redirectTo({
          url: `/pages/activity/goods_combination_details/index?id=${item.activity.id}`,
        })
        return
      }
      // 秒杀
      if (item.activity && item.activity.type == 1) {
        uni.redirectTo({
          url: `/pages/activity/goods_seckill_details/index?id=${item.activity.id}&time=${item.activity.time}&status=1`,
        })
        return
      }
    },
    // 微信登录回调
    onLoadFun: function (e) {
      this.getCouponList()
      this.getCartCount()
      this.downloadFilePromotionCode()
      // this.getUserInfo();

      // this.get_product_collect();
    },
    ChangCouponsClone: function () {
      this.$set(this.coupon, 'coupon', false)
    },
    /*
     * 获取用户信息
     */
    getUserInfo: function () {
      let that = this
      getUserInfo().then((res) => {
        console.log(res);
        that.$set(
          that.sharePacket,
          'isState',
          that.sharePacket.priceName != 0 ? false : true
        )
        that.$set(that, 'uid', res.data.uid)
      })
    },
    /**
     * 购物车数量加和数量减
     *
     */
    ChangeCartNum: function (changeValue) {
      //changeValue:是否 加|减
      //获取当前变动属性
      let productSelect = this.productValue[this.attrValue]
      //如果没有属性,赋值给商品默认库存
      if (productSelect === undefined && !this.attr.productAttr.length)
        productSelect = this.attr.productSelect
      //无属性值即库存为0；不存在加减；
      if (productSelect === undefined) return
      let stock = productSelect.stock || 0
      let num = this.attr.productSelect
      if (changeValue) {
        num.cart_num++
        if (num.cart_num > stock) {
          this.$set(this.attr.productSelect, 'cart_num', stock ? stock : 1)
          this.$set(this, 'cart_num', stock ? stock : 1)
        }
      } else {
        num.cart_num--
        if (num.cart_num < 1) {
          this.$set(this.attr.productSelect, 'cart_num', 1)
          this.$set(this, 'cart_num', 1)
        }
      }
    },
    attrVal(val) {
      this.$set(
        this.attr.productAttr[val.indexw],
        'index',
        this.attr.productAttr[val.indexw].attr_values[val.indexn]
      )
    },
    /**
     * 属性变动赋值
     *
     */
    ChangeAttr: function (res) {
      let productSelect = this.productValue[res]
      if (productSelect && productSelect.stock > 0) {
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.price)
        this.$set(this.attr.productSelect, 'stock', productSelect.stock)
        this.$set(this.attr.productSelect, 'unique', productSelect.unique)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', res)
        this.$set(this, 'attrTxt', '已选择')
      } else {
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.price)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', '')
        this.$set(this.attr.productSelect, 'cart_num', 0)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '购买类型')
      }
    },
    /**
     * 领取完毕移除当前页面领取过的优惠券展示
     */
    ChangCoupons: function (e) {
      let coupon = e
      console.log(e)
      let couponList = this.$util.ArrayRemove(this.couponList, 'id', coupon.id)
      this.$set(this, 'couponList', couponList)
      console.log(couponList)
      this.getCouponList()
    },

    setClientHeight: function () {
      let that = this
      if (!that.good_list.length) return
      let view = uni.createSelectorQuery().in(this).select('#list0')
      view
        .fields(
          {
            size: true,
          },
          (data) => {
            that.$set(that, 'clientHeight', data.height + 20)
          }
        )
        .exec()
    },
    /**
     * 获取产品详情
     *
     */
    getGoodsDetails: function () {
      let that = this
      getProductDetail(that.id)
        .then((res) => {
          console.log('查看',res.data);
          let storeInfo = res.data.storeInfo
          let good_list = res.data.good_list || []
          let count = Math.ceil(good_list.length / 6)
          let goodArray = new Array()
          for (let i = 0; i < count; i++) {
            let list = good_list.slice(i * 6, i * 6 + 6)
            if (list.length)
              goodArray.push({
                list: list,
              })
          }
          that.$set(that, 'storeInfo', storeInfo)
          that.$set(that, 'description', storeInfo.description)
          that.$set(that, 'reply', res.data.reply ? [res.data.reply] : [])
          that.$set(that, 'replyCount', res.data.replyCount)
          that.$set(that, 'replyChance', res.data.replyChance)
          that.$set(that.attr, 'productAttr', res.data.productAttr)
          that.$set(that, 'productValue', res.data.productValue)
          that.$set(that.sharePacket, 'priceName', res.data.priceName)
          that.$set(that, 'systemStore', res.data.system_store)
          that.$set(that, 'storeSelfMention', res.data.store_self_mention)
          that.$set(that, 'good_list', goodArray)
          that.$set(that, 'PromotionCode', storeInfo.code_base)
          that.$set(
            that,
            'activity',
            res.data.activity ? res.data.activity : []
          )
          uni.setNavigationBarTitle({
            title: storeInfo.store_name.substring(0, 7) + '...',
          })
          var navList = ['商品', '', '详情']
          if (goodArray.length) {
            navList.splice(2, 0, '推荐')
          }
          that.$set(that, 'navList', navList)
          // #ifdef H5
          that.$set(that, 'storeImage', that.storeInfo.image)
          that.getImageBase64()
          if (that.isLogin) {
            that.getCartCount()
          }
          this.ShareInfo()
          // #endif
          if (that.isLogin) {
            that.getUserInfo()
          }
          this.$nextTick(() => {
            if (good_list.length) {
              that.setClientHeight()
            }
          })
          setTimeout(function () {
            that.infoScroll()
          }, 500)
          // #ifndef H5
          that.downloadFilestoreImage()
          // #endif
          that.DefaultSelect()
        })
        .catch((err) => {
          //状态异常返回上级页面
          return that.$util.Tips(
            {
              title: err.toString(),
            },
            {
              tab: 3,
              url: 1,
            }
          )
        })
    },
    infoScroll: function () {
      var that = this,
        topArr = [],
        heightArr = []
      for (var i = 0; i < that.navList.length; i++) {
        //productList
        //获取元素所在位置
        var query = uni.createSelectorQuery().in(this)
        var idView = '#past' + i
        // if (!that.data.good_list.length && i == 2) {
        //   var idView = "#past" + 3;
        // }
        query.select(idView).boundingClientRect()
        query.exec(function (res) {
          var top = res[0].top
          var height = res[0].height
          topArr.push(top)
          heightArr.push(height)
          that.$set(that, 'topArr', topArr)
          that.$set(that, 'heightArr', heightArr)
        })
      }
    },
    /**
     * 拨打电话
     */
    makePhone: function () {
      uni.makePhoneCall({
        phoneNumber: this.systemStore.phone,
      })
    },
    /**
     * 打开地图
     *
     */
    showMaoLocation: function () {
      if (!this.systemStore.latitude || !this.systemStore.longitude)
        return this.$util.Tips({
          title: '缺少经纬度信息无法查看地图！',
        })
      uni.openLocation({
        latitude: parseFloat(this.systemStore.latitude),
        longitude: parseFloat(this.systemStore.longitude),
        scale: 8,
        name: this.systemStore.name,
        address: this.systemStore.address + this.systemStore.detailed_address,
        success: function () {},
      })
    },
    /**
     * 默认选中属性
     *
     */
    DefaultSelect: function () {
      let productAttr = this.attr.productAttr
      let value = []
      for (var key in this.productValue) {
        if (this.productValue[key].stock > 0) {
          value = this.attr.productAttr.length ? key.split(',') : []
          break
        }
      }
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], 'index', value[i])
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.join(',')]
      if (productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'store_name',
          this.storeInfo.store_name
        )
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.price)
        this.$set(this.attr.productSelect, 'stock', productSelect.stock)
        this.$set(this.attr.productSelect, 'unique', productSelect.unique)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', value.join(','))
        this.$set(this, 'attrTxt', '已选择')
      } else if (!productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'store_name',
          this.storeInfo.store_name
        )
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.price)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', '')
        this.$set(this.attr.productSelect, 'cart_num', 0)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '购买类型')
      } else if (!productSelect && !productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'store_name',
          this.storeInfo.store_name
        )
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.price)
        this.$set(this.attr.productSelect, 'stock', this.storeInfo.stock)
        this.$set(
          this.attr.productSelect,
          'unique',
          this.storeInfo.unique || ''
        )
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '购买类型')
      }
    },
    /**
     * 获取优惠券
     *
     */
    getCouponList() {
      let that = this
      getCoupons({
        page: 1,
        limit: 40,
        type: 1,
        product_id: that.id,
      }).then((res) => {
        that.$set(that.coupon, 'list', res.data)
        let couponList = []
        for (let i = 0; i < that.coupon.list.length; i++) {
          if (!res.data[i].is_use && couponList.length < 2)
            couponList.push(res.data[i])
        }
        that.$set(that, 'couponList', couponList)
      })
    },
    ChangCouponsUseState(index) {
      let that = this
      that.coupon.list[index].is_use = true
      that.$set(that.coupon, 'list', that.coupon.list)
      that.$set(that.coupon, 'coupon', false)
    },

    /**
     * 打开属性加入购物车
     *
     */
    joinCart: function (e) {
      //是否登录
      if (this.isLogin === false) {
        // #ifdef H5 || APP-PLUS
        toLogin()
        // #endif
      } else {
        this.goCat()
      }
    },
    /*
     * 加入购物车
     */
    goCat: function (news) {
      let that = this
      let q = {
        productId: that.id,
        cartNum: that.attr.productSelect.cart_num,
        new: news === undefined ? 0 : 1,
        uniqueId:
          that.attr.productSelect !== undefined
            ? that.attr.productSelect.unique
            : '',
        tid:this.tid
      }
       postCartAdd(q).then(function (res) {
          if (news) {
              uni.navigateTo({
                  url:`/pages/users/order_confirm/index?new=1&cartId=${res.data.cartId}`,
              })
          }
                // that.getCartCount(true)
      })
    },
    /**
     * 获取购物车数量
     * @param boolean 是否展示购物车动画和重置属性
     */
    getCartCount: function (isAnima) {
      let that = this
      const isLogin = that.isLogin
      if (isLogin) {
        getCartCounts().then((res) => {
          that.CartCount = res.data.count
          //加入购物车后重置属性
          if (isAnima) {
            that.animated = true
            setTimeout(function () {
              that.animated = false
            }, 500)
          }
        })
      }
    },
    /**
     * 参与拼团
     */
    goBuy: function (e) {
      if (this.isLogin === false) {
        // #ifdef H5
        toLogin()
        // #endif
      } else {
        this.goCat(true)
      }
    },
    // 授权关闭
    authColse: function (e) {
      console.log(e, 'eeeee')
      this.isShowAuth = e
    },
    /**
     * 分享打开
     *
     */
    listenerActionSheet: function () {
      if (this.isLogin === false) {
        // #ifdef H5 || APP-PLUS
        toLogin()
        // #endif
        // #ifdef MP
        this.$set(this, 'isAuto', true)
        this.$set(this, 'isShowAuth', true)
        // #endif
      } else {
        // #ifdef H5
        // if (this.$wechat.isWeixin() === true) {
        if (
          navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
        ) {
          console.log('zai weixin')
          this.weixinStatus = true
        }
        this.downloadFilePromotionCode()
        // #endif
        this.posters = true
      }
    },
    // 分享关闭
    listenerActionClose: function () {
      this.posters = false
    },
    //隐藏海报
    posterImageClose: function () {
      this.posterImageStatus = false
    },
    //替换安全域名
    setDomain: function (url) {
      url = url ? url.toString() : ''
      //本地调试打开,生产请注销
      if (url.indexOf('https://') > -1) return url
      else return url.replace('http://', 'https://')
    },
    //获取海报产品图
    downloadFilestoreImage: function () {
      let that = this
      uni.downloadFile({
        url: that.setDomain(that.storeInfo.image),
        success: function (res) {
          that.storeImage = res.tempFilePath
        },
        fail: function () {
          return that.$util.Tips({
            title: '',
          })
          that.storeImage = ''
        },
      })
    },
    /**
     * 获取产品分销二维码
     * @param function successFn 下载完成回调
     *
     */
    downloadFilePromotionCode: function (successFn) {
      let that = this
      getProductCode(that.id)
        .then((res) => {
          uni.downloadFile({
            url: that.setDomain(res.data.code),
            success: function (res) {
              that.$set(that, 'isDown', false)
              if (typeof successFn == 'function')
                successFn && successFn(res.tempFilePath)
              else that.$set(that, 'PromotionCode', res.tempFilePath)
            },
            fail: function () {
              that.$set(that, 'isDown', false)
              that.$set(that, 'PromotionCode', '')
            },
          })
        })
        .catch((err) => {
          that.$set(that, 'isDown', false)
          that.$set(that, 'PromotionCode', '')
        })
    },
    getImageBase64: function () {
      let that = this
      imageBase64(that.storeImage, that.PromotionCode)
        .then((res) => {
          that.storeImage = res.data.image
          that.PromotionCode = res.data.code
        })
        .catch(() => {})
    },
    // 小程序关闭分享弹窗；
    goFriend: function () {
      this.posters = false
    },
    /**
     * 生成海报
     */
    goPoster: function () {
      let that = this
      that.posters = false
      that.$set(that, 'canvasStatus', true)
      let arr2 = [that.posterbackgd, that.storeImage, that.PromotionCode]
      // // #ifndef H5
      if (that.isDown)
        return that.$util.Tips({
          title: '正在下载海报,请稍后再试！',
        })
      // // #endif
      uni.getImageInfo({
        src: that.PromotionCode,
        fail: function (res) {
          // #ifdef H5
          return that.$util.Tips({
            title: res,
          })
          // #endif
          // #ifdef MP
          return that.$util.Tips({
            title: '小程序二维码需要发布正式版后才能获取到',
          })
          // #endif
        },
        success() {
          if (arr2[2] == '') {
            //海报二维码不存在则从新下载
            // // #ifndef H5
            that.downloadFilePromotionCode(function (msgPromotionCode) {
              arr2[2] = msgPromotionCode
              if (arr2[2] == '')
                return that.$util.Tips({
                  title: '海报二维码生成失败！',
                })
              that.$util.PosterCanvas(
                arr2,
                that.storeInfo.store_name,
                that.storeInfo.price,
                that.storeInfo.ot_price,
                function (tempFilePath) {
                  that.$set(that, 'posterImage', tempFilePath)
                  that.$set(that, 'posterImageStatus', true)
                  that.$set(that, 'canvasStatus', false)
                  that.$set(that, 'actionSheetHidden', !that.actionSheetHidden)
                }
              )
            })
            // // #endif
            // // #ifdef H5
            // that.$util.PosterCanvas(arr2, that.storeInfo.store_name, that.storeInfo.price, function(tempFilePath) {
            // 	that.$set(that, 'posterImage', tempFilePath);
            // 	that.$set(that, 'posterImageStatus', true);
            // 	that.$set(that, 'canvasStatus', false);
            // 	that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
            // });
            // // #endif
          } else {
            //生成推广海报
            that.$util.PosterCanvas(
              arr2,
              that.storeInfo.store_name,
              that.storeInfo.price,
              that.storeInfo.ot_price,
              function (tempFilePath) {
                that.$set(that, 'posterImage', tempFilePath)
                that.$set(that, 'posterImageStatus', true)
                that.$set(that, 'canvasStatus', false)
                that.$set(that, 'actionSheetHidden', !that.actionSheetHidden)
              }
            )
          }
        },
      })
    },

    /*
     * 保存到手机相册
     */
    // #ifdef MP
    savePosterPath: function () {
      let that = this
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                uni.saveImageToPhotosAlbum({
                  filePath: that.posterImage,
                  success: function (res) {
                    that.posterImageClose()
                    that.$util.Tips({
                      title: '保存成功',
                      icon: 'success',
                    })
                  },
                  fail: function (res) {
                    that.$util.Tips({
                      title: '保存失败',
                    })
                  },
                })
              },
            })
          } else {
            uni.saveImageToPhotosAlbum({
              filePath: that.posterImage,
              success: function (res) {
                that.posterImageClose()
                that.$util.Tips({
                  title: '保存成功',
                  icon: 'success',
                })
              },
              fail: function (res) {
                that.$util.Tips({
                  title: '保存失败',
                })
              },
            })
          }
        },
      })
    },
    // #endif
    //#ifdef H5
    ShareInfo() {
      let data = this.storeInfo
      let href = location.href
      console.log('333', data)
      //if (this.$wechat.isWeixin()) {
      if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
        getUserInfo().then((res) => {
          href =
            href.indexOf('?') === -1
              ? href + '?spread=' + res.data.uid
              : href + '&spread=' + res.data.uid

          let configAppMessage = {
            desc: data.store_info,
            title: data.store_name,
            link: href,
            imgUrl: data.image,
          }
          this.$wechat
            .wechatEvevt(
              [
                'updateAppMessageShareData',
                'updateTimelineShareData',
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
              ],
              configAppMessage
            )
            .then((res) => {
              console.log(res)
            })
            .catch((err) => {
              console.log(err)
            })
        })
      }
    },
    //#endif
  },
}
</script>

<style scoped lang="scss">
.product-con {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f8f8f8;
}
.pyimg {
  width: 100%;
  height: 120rpx;
}
.pink_list {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx 80rpx;
  text-align: center;
}
.user_list {
  margin: 0 auto;
}
.reds {
  color: red;
  margin: 0 10rpx;
}
.team_box {
  background-color: #fff;
  margin: 20rpx 0;
}
.pink_list .p_name {
  display: inline-block;
  width: 120rpx;
  margin-bottom: 10rpx;
}
.pink_list .stop {
  font-size: 32rpx;
  color: #aaa;
  margin: 20rpx 0;
}
.pink_list .stop .fcr {
  color: #fff;
  background-color: red;
  margin: 0 10rpx;
}
.tx {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}
.activity_pin {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  background: linear-gradient(
    90deg,
    rgba(233, 51, 35, 1) 0%,
    rgba(250, 101, 20, 1) 100%
  );
  opacity: 1;
  border-radius: 22rpx;
  padding: 0 15rpx;
  margin-left: 19rpx;
}

.activity_miao {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(
    90deg,
    rgba(250, 102, 24, 1) 0%,
    rgba(254, 161, 15, 1) 100%
  );
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.iconfonts {
  color: #fff !important;
  font-size: 28rpx;
}

.activity_title {
  font-size: 24rpx;
  color: #fff;
}

.activity_kan {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(
    90deg,
    rgba(254, 159, 15, 1) 0%,
    rgba(254, 178, 15, 1) 100%
  );
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.mask {
  z-index: 300 !important;
}

.head-bar {
  background: #fff;
}
.fts {
  font-size: 24rpx;
  padding: 10rpx;
  margin-left: 40rpx;
}
.generate-posters {
  width: 100%;
  height: 170rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1rpx solid #eee;
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 50%;
  text-align: center;
  font-size: 30rpx;
}

.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.product-con .mask {
  z-index: 88;
}

.product-con .footer {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  box-sizing: border-box;
  height: 100rpx;
  background-color: #fff;
  z-index: 277;
  border-top: 1rpx solid #f0f0f0;
}

.product-con .footer .item {
  font-size: 18rpx;
  color: #666;
}

.product-con .footer .item .iconfont {
  text-align: center;
  font-size: 40rpx;
}

.product-con .footer .item .iconfont.icon-shoucang1 {
  color: #f00;
}

.product-con .footer .item .iconfont.icon-gouwuche1 {
  font-size: 40rpx;
  position: relative;
}

.product-con .footer .item .iconfont.icon-gouwuche1 .num {
  color: #fff;
  position: absolute;
  font-size: 18rpx;
  padding: 2rpx 8rpx 3rpx;
  border-radius: 200rpx;
  top: -10rpx;
  right: -10rpx;
}

.product-con .footer .bnt {
    width: 750rpx;
    height: 100rpx;
  }

	.product-con .footer .bnt .bnts {
    width: 750rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    font-size: 28rpx;
  }

.product-con .footer .bnt .joinCart {
  border-radius: 50rpx 0 0 50rpx;
  background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
}

.product-con .footer .bnt .buy {
  background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
}

.product-con .store-info {
  margin-top: 20rpx;
  background-color: #fff;
}

.product-con .store-info .title {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #282828;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px solid #f5f5f5;
}

.product-con .store-info .info {
  padding: 0 30rpx;
  height: 126rpx;
}

.product-con .store-info .info .picTxt {
  width: 615rpx;
}

.product-con .store-info .info .picTxt .pictrue {
  width: 76rpx;
  height: 76rpx;
}

.product-con .store-info .info .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .store-info .info .picTxt .text {
  width: 522rpx;
}

.product-con .store-info .info .picTxt .text .name {
  font-size: 30rpx;
  color: #282828;
}

.product-con .store-info .info .picTxt .text .address {
  font-size: 24rpx;
  color: #666;
  margin-top: 3rpx;
}

.product-con .store-info .info .picTxt .text .address .iconfont {
  color: #707070;
  font-size: 18rpx;
  margin-left: 10rpx;
}

.product-con .store-info .info .picTxt .text .address .addressTxt {
  max-width: 480rpx;
}

.product-con .store-info .info .iconfont {
  font-size: 40rpx;
}

.product-con .superior {
  background-color: #fff;
  margin-top: 20rpx;
  padding-bottom: 10rpx;
}

.product-con .superior .title {
  height: 98rpx;
}

.product-con .superior .title image {
  width: 30rpx;
  height: 30rpx;
}

.product-con .superior .title .titleTxt {
  margin: 0 20rpx;
  font-size: 30rpx;
  background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-con .superior .slider-banner {
  width: 690rpx;
  margin: 0 auto;
  position: relative;
}

.product-con .superior .slider-banner swiper {
  height: 100%;
  width: 100%;
}

.product-con .superior .slider-banner swiper-item {
  height: 100%;
}

.product-con .superior .slider-banner .list {
  width: 100%;
}

.product-con .superior .slider-banner .list .item {
  width: 215rpx;
  margin: 0 22rpx 30rpx 0;
  font-size: 26rpx;
}

.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}

.product-con .superior .slider-banner .list .item .pictrue {
  position: relative;
  width: 100%;
  height: 215rpx;
}

.product-con .superior .slider-banner .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 12rpx;
}

.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}

.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: #e93323;
}

button {
  padding: 0;
  margin: 0;
  line-height: normal;
  background-color: #fff;
}

button::after {
  border: 0;
}

action-sheet-item {
  padding: 0;
  height: 240rpx;
  align-items: center;
  display: flex;
}

.contact {
  font-size: 16px;
  width: 50%;
  background-color: #fff;
  padding: 8rpx 0;
  border-radius: 0;
  margin: 0;
  line-height: 2;
}

.contact::after {
  border: none;
}

.action-sheet {
  font-size: 17px;
  line-height: 1.8;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25rpx 0;
}

.canvas {
  z-index: 300;
  width: 750px;
  height: 1190px;
}

.poster-pop {
  width: 450rpx;
  height: 714rpx;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 399;
  top: 50%;
  margin-top: -357rpx;
}

.poster-pop image {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-pop .close {
  width: 46rpx;
  height: 75rpx;
  position: fixed;
  right: 0;
  top: -73rpx;
  display: block;
}

.poster-pop .save-poster {
  background-color: #df2d0a;
  font-size: ：22rpx;
  color: #fff;
  text-align: center;
  height: 76rpx;
  line-height: 76rpx;
  width: 100%;
}

.poster-pop .keep {
  color: #fff;
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}

.pro-wrapper .iconn {
  background-image: url('');
  width: 100rpx;
  height: 100rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.pro-wrapper .iconn.iconn1 {
  background-image: url('');
}

.pictrue_log {
  width: 80upx;
  height: 40upx;
  border-radius: 6upx 0 12upx 0;
  line-height: 40upx;
  font-size: 24upx;
}

.pictrue_log_class {
  z-index: 3;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(246, 122, 56, 1)),
    to(rgba(241, 27, 9, 1))
  );
  background: linear-gradient(
    90deg,
    rgba(246, 122, 56, 1) 0%,
    rgba(241, 27, 9, 1) 100%
  );
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  text-align: center;
}

.navbar .header {
  height: 96rpx;
  font-size: 30rpx;
  color: #050505;
  background-color: #fff;
  /* #ifdef MP */
  padding-right: 95rpx;
  /* #endif */
}

.home {
  /* #ifdef H5 */
  top: 20rpx !important;
  /* #endif */
}
.pin {
  height: 100rpx;
  line-height: 100rpx;
  padding-left: 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  background-color: #fff;
  margin-top: 30rpx;
  border-bottom: 2rpx solid #f7f7f7;
}
.Inventory {
  height: 80rpx;
  line-height: 80rpx;
  padding-left: 26rpx;
  background-color: #fff;
  margin-top: 20rpx;
  color: #82848f;
  border-bottom: 2rpx solid #f7f7f7;
}
.navbar .header .item {
  position: relative;
  margin: 0 25rpx;
}

.navbar .header .item.on:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: '';
  background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}

.navbar {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.navbar .navbarH {
  position: relative;
}

.navbar .navbarH .navbarCon {
  position: absolute;
  bottom: 0;
  height: 100rpx;
  width: 100%;
}

.home {
  color: #fff;
  position: fixed;
  font-size: 33rpx;
  width: 140rpx;
  height: 54rpx;
  z-index: 100;
  left: 33rpx;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 27rpx;
}

.home .line {
  width: 1rpx;
  height: 24rpx;
  background: rgba(255, 255, 255, 0.25);
}

.home .icon-xiangzuo {
  font-size: 28rpx;
}

.share-box {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
